<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer">
    <script src="../js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/index.js"></script>
<body>
<div id="play" style="padding: 8px;">
    <el-page-header @back="goBack" content="播放页面"></el-page-header>
</div>
<div id="vd"></div>
<audio id="player" autoplay="autoplay"></audio>
<script>
    let av = getPar('av');

    function callbackfunction(j) {
        let u = j.durl[0].url;
        $("#vd").html('<video width="900" height="500" src="' + u + '" preload="auto" autoplay="" controls="" class="embed-responsive-item"></video>');
        $("#page1").attr("href", j.durl[0].url);
    }

    function parseVideo(page) {
        $.getScript("http://api.bilibili.com/playurl?callback=callbackfunction&aid=" + av + "&page=" + page + "&platform=html5&quality=3&vtype=mp4&type=jsonp");
    }

    function getPar(par) {
        //获取当前URL
        var local_url = document.location.href;
        //获取要取得的get参数位置
        var get = local_url.indexOf(par + "=");
        if (get === -1) {
            return false;
        }
        //截取字符串
        var get_par = local_url.slice(par.length + get + 1);
        //判断截取后的字符串是否还有其他get参数
        var nextPar = get_par.indexOf("&");
        if (nextPar !== -1) {
            get_par = get_par.slice(0, nextPar);
        }
        return get_par;
    }
    parseVideo(1);
    new Vue({
        el: '#play',
        methods: {
            goBack() {
                window.history.go(-1);
            }
        }
    });
</script>
</body>
</html>
